<!--短信下发-->
<template>
  <div>
    <a-card>
      <div class="">
        <a-card :bordered="true" class="searchBox" :bodyStyle="{padding : '10px 24px'}">
          <a-form layout="inline">
            <a-form-item label="手机号查询">
              <a-input v-model="searchParams.keywords"></a-input>
            </a-form-item>
            <a-form-item label="类型">
              <a-select v-model="searchParams.type" allowClear style="width: 200px">
                <a-select-option value="">全部</a-select-option>
                <a-select-option :value="1">考试预约</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="下发日期">
              <a-range-picker
                :defaultValue="[moment(searchParams.bgTm, dateFormat), moment(searchParams.endTm, dateFormat)]"
                :format="dateFormat"
                @change="onChange"
              ></a-range-picker>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" icon="search" @click="handleSearch">查询</a-button>
            </a-form-item>

          </a-form>
        </a-card>
      </div>
      <!--新增-->
      <!--<a-button type="primary" icon="plus" @click="handleCreate" style="margin:0 0 20px 15px;">新增</a-button>-->
      <a-table :columns="columns" :dataSource="data"
               bordered size="small" rowKey="name"
               :pagination="pagination" :loading="loading"
               @change="handleTableChange"
      >
        <template slot="senderInfo" slot-scope="text,record">
          {{ nickname }}
        </template>

        <template slot="msgType" slot-scope="text,record">
          {{text | typeList}}
        </template>

        <span slot="action" slot-scope="text, record">
        <template>
          <a href="javascript:;" @click="deleteData(record)">删除</a>
        </template>
      </span>

      </a-table>

    </a-card>

    <!--新增弹窗-->
    <ShortPopup :mdl="mdl" @handleSearch="handleSearch"></ShortPopup>
  </div>
</template>

<script>
/* eslint-disable */
  import {queryInfoSmsDelivery,deleteInfoSmsDelivery} from "@/api/messageManage/sendingSMS"
  import moment from 'moment';
  import ShortPopup from './shortPopup'
  import { mapGetters } from 'vuex'

  export default {
    components: {
      ShortPopup,
    },
    data() {
      return {
        dateFormat: 'YYYY-MM-DD',
        /*   -------搜索框--------*/
        searchParams: {
          keywords: '',
          type: '',
          bgTm: moment(new Date()).subtract(1, 'months'),
          endTm: new Date(),
          selected: 'phone',
          selectedType: 'type'
        },

        /*   -------分页--------*/
        pagination: {
          showSizeChanger: true,
          current: 1,
          pageSize: 10,
          total: 0
        },
        /*   -------弹窗--------*/
        mdl: {
          dialogStatus: '',
          dialogTitleMap: {
            update: '编辑',
            create: '添加'
          },
          visible: false,
          title: '',
          formData: {
            createDept: '',
            createTime: '',
            createUser: '',
            id: '',
            isDeleted: '',
            msgContent: '',
            msgType: '',
            phoneNum: '',
            receiver: '',
            senderInfo: '',
            status: '',
            updateTime: '',
            updateUser: '',
            userName: '',
          },
          labelCol: {
            xs: {
              span: 24
            },
            sm: {
              span: 5
            }
          },
          wrapperCol: {
            xs: {
              span: 24
            },
            sm: {
              span: 16
            }
          },
        },


        /*   -------表格--------*/
        loading: false,
        columns: [
          {
            title: '用户名称',
            dataIndex: 'userName'
          },
//          {
//            title: '发送人信息',
//            dataIndex: 'senderInfo',
//            scopedSlots: {customRender: 'senderInfo'}
//          },
          {
            title: '手机号码',
            dataIndex: 'phoneNum'
          },
          {
            title: '短信类别',
            dataIndex: 'msgType',
            scopedSlots: {customRender: 'msgType'}
          },

          {
            title: '短信内容',
            dataIndex: 'msgContent'
          },
          {
            title: '创建时间',
            dataIndex: 'createTime',
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            scopedSlots: {customRender: 'action'}
          }
        ],
        data: []
      }
    },
    inject: ['upShow'],
    filters: {
      typeList(val){
        let typeList = {
          "0": "考试预约",
          "1": "考试预约",
          "2": "考试预约"
        }
        return typeList[val]
      }

    },
    computed: {
      ...mapGetters(['nickname'])
    },
    mounted() {
      this.getTableData()
    },
    methods: {
      moment,
      onChange(dates, dateStrings) {
        this.searchParams.bgTm = dateStrings[0];
        this.searchParams.endTm = dateStrings[1];
      },
      handleTableChange(pagination, filters, sorter) {
        this.pagination = pagination
        let sortOrder = ''
        let sortField = sorter.field ? sorter.field : ''
        if (sorter.order) {
          sortOrder = sortOrder === 'ascend' ? 'asc' : 'desc'
        }
        this.getTableData(sortField, sortOrder)
      },

      getTableData(sortField, sortOrder) {
        this.loading = true
        // 此处调用获取实时雨量数据
        const parameter = {
          _search: true,//是否分页查询
          bgTm: this.searchParams.bgTm,
          selected: this.searchParams.selected,
          keywords: this.searchParams.keywords,
          data:{
            createDept:"",
            createTime:"",
            createUser:"",
            id:"",
            isDeleted:"",
            msgContent:"",
            msgType:"",
            phoneNum:"",
            receiver:"",
            senderInfo:"",
            status:"",
            updateTime:"",
            updateUser:"",
            userName:""
          },
          endTm: this.searchParams.endTm,
          pageSize: this.pagination.pageSize || 10,
          pageNumber: this.pagination.current || 1
        }
        queryInfoSmsDelivery(parameter).then(res => {
          this.loading = false
          this.pagination.total = res.data.total
          this.data = res.data.records
        }).catch(err => {
          this.loading = false
        })
      },
      handleSearch() {
        this.pagination.current = 1
        this.pagination.pageSize = 10
        this.getTableData()
      },

      setDefaults() {
        this.mdl.formData = {
          id: '',
          userNumber: '',
          userId: '',
          type: '',
          content: '',
          createBy: '',
          createTime: '',
          updateBy: '',
          updateTime: '',
          del: '',
        }
      },
      //添加行
      handleCreate() {
        this.setDefaults()
        this.mdl.dialogStatus = 'create'
        this.mdl.visible = true
      },
      createData() {
        this.mdl.visible = false
        const parameter = this.mdl.formData;
        console.log(parameter)
        /*createInfoSmsDelivery(parameter).then(res => {
          if (res.code === 200
          ) {
            this.mdl.visible = false
            this.handleSearch()
          }
        }).catch(err => {
          console.log(err)
        })*/
      },

      //编辑当前行
      handleUpdate(row) {
        console.log("这一行", row)
        this.mdl.formData = Object.assign({}, row) // copy obj
        this.mdl.dialogStatus = 'update'
        this.mdl.visible = true
      },

      updateData(row) {
        this.mdl.visible = false
        const parameter = {
          id: this.mdl.formData.id,
          userNumber: this.mdl.formData.userNumber,
          userId: this.mdl.formData.userId,
          type: this.mdl.formData.type,
          content: this.mdl.formData.content,
          createBy: this.mdl.formData.createBy,
          createTime: this.mdl.formData.createTime,
          updateBy: this.mdl.formData.updateBy,
          updateTime: this.mdl.formData.updateTime,
          del: this.mdl.formData.del,
        }
        updateSmsRecord(parameter).then(res => {
          if (res.code === 200
          ) {
            this.$success({
              title: '通知',
              content: '成功!',
            });
            this.mdl.visible = false
            this.handleSearch()
          }
          else {
            this.$error({
              title: '通知',
              content: res.msg,
            });
          }

        }).catch(err => {
          this.$error({
            title: '通知',
            content: '请求失败',
          });
        })
      },
      //deleteInfoSmsDelivery
      handleDelete(row) {
        deleteInfoSmsDelivery(row.id).then(res => {
          if(res.code === 200)
          {
            this.upShow(1,res.msg || '删除成功')
            this.handleSearch()
          }
          else
          {
            this.upShow(2,res.msg)
          }
        }).catch(err => {
          this.upShow(2)
        })
      },
      deleteData(val){
        let self = this;
        this.$confirm({
          title: '删除该条短信记录?',
          content: '确定删除该条短信记录',
          onOk() {
            self.handleDelete(val)
          },
          onCancel() {},
        });
      }
    }
  }
</script>

<style scoped>

</style>
